<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业3</title>
</head>
<script>


    window.onload = function () {

        // TODO 页面加载成功要做的事情

        // messages = [];
        // // 全局变量 存放信息
        // traverseAllNodes(document);
        // // 遍历页面
        //
        // for (let message of messages) {
        //     // 输出 遍历信息
        //     console.log(message);
        // }
        addOneDiv();
        delOneDiv();
        changeOneDiv();
    }

    function traverseAllNodes(node) {
        // TODO 遍历整个页面,结果存储在 messages 中
        let nodeName = node.nodeName;
        let nodeType = node.nodeType;
        let nodeValue = node.nodeValue;
        let message = `节点名:${nodeName} 节点类型:${nodeType} 节点值:${nodeValue}`;
        // message 放信息
        messages.push(message);
        // 放入 集合中
        if (nodeType !== 1 && nodeType !== 9) {
            // 不是 element 或者 document 就跳出
            return;
        }
        if (nodeType === 1) {
            // 是 element
            let attributes = node.attributes;
            // 获取所有的子 element
            for (let attribute of attributes) {
                let name = attribute.name;
                let value = attribute.value;
                message = `node.nodeName 标签的属性: ${name} ${value}`;
                // 提取信息
                messages.push(message);
                // 放入集合
            }
        }
        let childNodes = node.childNodes;
        // 获取所有的子元素
        for (let child of childNodes) {
            // 递归
            traverseAllNodes(child);
        }

    }

    function addOneDiv() {
        // TODO 添加一个 div
        let addOne = document.getElementById("addOne");
        // 获取 addOne 按钮，添加点击行为
        addOne.onclick = function () {
            // 设置添加一个
            let oneDiv = document.getElementById("oneDiv");
            let newDiv = document.createElement("div");
            // 创建一个新的 div
            let text = document.createTextNode("我是一个新的 div ");
            newDiv.appendChild(text);
            oneDiv.appendChild(newDiv);
            // 添加到 newDiv

        }
    }

    function delOneDiv() {
        // TODO 删除一个 div
        let delOne = document.getElementById("delOne");
        // 获取 button 添加行为
        delOne.onclick = function () {
            // 设置行为
            let oneDiv = document.getElementById("oneDiv");
            oneDiv.remove();
            // 删除 节点
        }
    }

    function changeOneDiv() {
        // TODO 改变一个 div
        let changeOne = document.getElementById("changeOne");
        changeOne.onclick = function () {
            // 获取 改变 div，然后 改变 innerText 和 style
            let elementById = document.getElementById("TwoDiv");
            elementById.innerText = "我是改变后的内容！"
            elementById.style.color = "red";
            elementById.style.fontSize = "30px";
        }
    }

</script>
<body>
<h1>我是一个标题</h1>
<div>
    <div>
        <div>
            <div id="oneDiv">套娃</div>
            <div id="TwoDiv">改变</div>
        </div>
    </div>
    <p>一行</p>
    <p>二行</p>
    <input type="button" id="addOne" value="给 套娃 添加一个 div">
    <br>
    <br>
    <input type="button" id="delOne" value="删除 套娃 div">
    <br>
    <br>
    <input type="button" id="changeOne" value="改变 改变 div 的样式和文本内容 ">
    <br>
</div>
</body>
</html>